<template>
    <div>
        <div>
            <el-row>
                <el-col :span="4">
                    <el-input style="width: 200px" v-model="value1" size="small" prefix-icon="el-icon-search" placeholder="操作摘要.." clearable
                              @keydown.native="initRecords"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-date-picker
                            size="small"
                            v-model="value2"
                            type="datetimerange"
                            align="right"
                            unlink-panels
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-col>
                <el-col :span="6">
                    <el-button size="small" icon="el-icon-search" @click="initRecords">搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 10px">
            <el-table :data="records" style="width: 60%">
                <el-table-column type="expand" width="55">
                    <template slot-scope="scope">
                        <el-card class="myrow">
                            <el-row>
                                <el-col :span="8">
                                    <label>操作摘要：</label>
                                    <span>{{scope.row.webLog.description}}</span>
                                </el-col>
                                <el-col :span="8">
                                    <label>请求IP：</label>
                                    <span>{{scope.row.webLog.ip}}</span>
                                </el-col>
                                <el-col :span="8">
                                    <label>请求方式：</label>
                                    <span>{{scope.row.webLog.method}}</span>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="16">
                                    <label>uri：</label>
                                    <span>{{scope.row.webLog.uri}}</span>
                                </el-col>
                                <el-col :span="8">
                                    <label>耗时：</label>
                                    <span>{{scope.row.webLog.spendTime}}（毫秒）</span>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <label>url：</label>
                                    <span>{{scope.row.webLog.url}}</span>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <label>请求参数：</label>
                                    <span>{{scope.row.webLog.parameters}}</span>
                                </el-col>
                            </el-row>
                        </el-card>
                    </template>
                </el-table-column>
                <el-table-column label="日期" prop="time" width="200">
                    <template slot-scope="scope">
                        <i class="el-icon-time"/>
                        <span style="margin-left: 5px">{{scope.row.time}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作摘要" prop="brief" width="200">
                    <template slot-scope="scope">
                        <el-tag :type="handleTag(scope.row.webLog.method)">{{scope.row.brief}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作员" prop="user.name" width="150"></el-table-column>
                <el-table-column label="联系电话" prop="user.phone" width="150"></el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;width: 55%">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30,40]"
                        :page-size="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SysLog",
        data() {
            return {
                records: [],
                record: {
                    id: 17,
                    time: "2020-03-28 22:11:43",
                    lastTime: "2020-03-28 22:11:43",
                    userId: 3,
                    brief: "员工人脸打卡",
                    content: null,
                    user: {
                        name: "",
                        phone: "",
                        enabled: true,
                    },
                    webLog: {
                        parameters: {},
                        result: null,
                        description: "员工人脸打卡",
                        uri: "/employee/faceclock/",
                        url: "http://localhost:8081/employee/faceclock/",
                        spendTime: 646,
                        method: "POST",
                        ip: "127.0.0.1"
                    }
                },
                total: 0,
                page: 1,
                size: 10,
                value1: '',
                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        mounted() {
            this.initRecords();
        },
        methods: {
            handleSizeChange(val) {
                this.size = val;
                this.initRecords();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.initRecords();
            },
            initRecords() {
                // let url = '/system/logs/?page=' + this.page + '&size=' + this.size + '&brief=' + this.value1;
                // if (this.value2){
                //     url+='&time=' + this.value2[0] + '&lastTime=' + this.value2[1];
                // }
                // console.log(url);
                let url = '/system/logs/?page=' + this.page + '&size=' + this.size+ '&brief=' + this.value1;
                if (this.value2){
                    url+='&time=' + this.value2[0] + '&lastTime=' + this.value2[1];
                }
                console.log(url);
                this.getRequest(url).then(resp => {
                    if (resp) {
                        this.records = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            handleTag(method){
                if(method==='PUT'){
                    return "warning"
                }else if(method==='POST'){
                    return "primary"
                }else if(method==='DELETE'){
                    return "danger"
                }else{
                    return "info"
                }
            }
        }
    }
</script>

<style scoped>
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    /deep/ .el-table__body tr.current-row>td{
        background-color: rgba(35,29,37,.9) !important;
        /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
    }
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: rgba(35,29,37,.1);;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }
</style>
<style>
    label{
        color: #8c939d;
    }
    .myrow .el-row{
        margin-top: 10px;
    }
</style>